<template>
	<view class="sunny-video" :style="{'--primary':primaryColor}">
		<video class="video" :style="{height:elVideoHeight.strNum}" id="sunnyVideo" ref="sunnyVideo" :title="title" :src="src" :show-center-play-btn="false" :controls="isPlay" @timeupdate="timeupdate" enable-play-gesture :show-mute-btn="showMuteBtn" @play="play" @pause="pause" @ended="ended" @error="playError" @fullscreenchange="fullscreenchange">
			
			<cover-view v-if="visibleTrialEndBox" class="trialEndBox">
				<!-- #ifdef APP-NVUE -->
				<text class="tipText">{{tipText}}</text>
				<text class="closeBtn" @click="$emit('handleBtn')">{{btnText}}</text>
				<!-- #endif -->
				<!-- #ifndef APP-NVUE -->
				<cover-view class="tipText">{{tipText}}</cover-view>
				<cover-view class="closeBtn" @click="$emit('handleBtn')">{{btnText}}</cover-view>
				<!-- #endif -->
			</cover-view>
			
			<cover-view v-if="!isPlay" class="banner-view" :style="{height:elVideoHeight.strNum}">
				<cover-image class="banner" :style="{height:elVideoHeight.strNum}" :src="poster" mode="" @click="changePlay"></cover-image>
				<cover-image class="imgPal" :style="{width:playBtnHeight.strNum,height:playBtnHeight.strNum,top:`${elVideoHeight.intNum/2}px`,transform:`translate(-${playBtnHeight.intNum/2}px,-${playBtnHeight.intNum/2}px)`}" @click="changePlay" :src="playImg"></cover-image>
			</cover-view>
			
			<cover-view v-if="isPlay&&!isShowRateBox" class="speedText" :style="{top:`${isFullScreen?(screenInfo.width/2) - 14.5 +'px':(elVideoHeight.intNum/2)- 14.5+'px'}`}" @click="isShowRateBox = true">
				<!-- #ifndef MP-WEIXIN || APP-NVUE -->
				<cover-view class="text" @click="isShowRateBox = true">{{rateText}}X</cover-view>
				<!-- #endif -->
				<!-- #ifdef APP-NVUE -->
				<text class="text">{{rateText}}X</text>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				{{rateText}}X
				<!-- #endif -->
			</cover-view>
			
			<cover-view v-if="isFullScreen&&isShowRateBox" class="vertical vertical-full"  :style="{width:`${screenInfo.height}px`,height:`${isShowRateBox? screenInfo.width : screenInfo.width-40}px`}">
				<!-- #ifdef APP-NVUE -->
				<view class="options" :style="{width:`${screenInfo.height - screenInfo.options}px`,height:`${screenInfo.width}px`}" @click="isShowRateBox=false"></view>
				<view class="speed-box" :style="{height:`${screenInfo.width}px`}">
					<text class="speeds" :class="{act:item.isTo}" v-for="(item,index) in rateList" :key="item.name" @click="changeRate(item,index)">{{item.name}}X</text>
				</view>
				<!-- #endif -->
				<!-- #ifndef APP-NVUE -->
				<cover-view class="options" :style="{width:`${screenInfo.height - screenInfo.options}px`,height:`${screenInfo.width}px`}" @click="isShowRateBox=false"></cover-view>
				<cover-view class="speed-box" :style="{height:`${screenInfo.width}px`}">
					<cover-view class="speeds" :class="{act:item.isTo}" v-for="(item,index) in rateList" :key="item.name" @click="changeRate(item,index)">{{item.name}}X</cover-view>
				</cover-view>
				<!-- #endif -->
			</cover-view>
			<cover-view v-if="!isFullScreen&&isShowRateBox" class="vertical" :style="{height:`${isShowRateBox ? elVideoHeight.intNum:elVideoHeight.intNum - 44}px`}">
				<!-- #ifdef APP-NVUE -->
				<view class="options" :style="{height:elVideoHeight.strNum}" @click="isShowRateBox=false"></view>
				<view class="speed-box" :style="{height:elVideoHeight.strNum}">
					<text class="speeds" :class="{act:item.isTo}" v-for="(item,index) in rateList" :key="item.name" @click="changeRate(item,index)">{{item.name}}X</text>
				</view>
				<!-- #endif -->
				<!-- #ifndef APP-NVUE -->
				<cover-view class="options" :style="{height:elVideoHeight.strNum}" @click="isShowRateBox=false"></cover-view>
				<cover-view class="speed-box" :style="{height:elVideoHeight.strNum}">
					<cover-view class="speeds" :class="{act:item.isTo}" v-for="(item,index) in rateList" :key="item.name" @click="changeRate(item,index)">{{item.name}}X</cover-view>
				</cover-view>
				<!-- #endif -->
			</cover-view>
		</video>
	</view>
</template>

<script>
	import {getPx,addUnit,sys} from './function.js'
	export default {
		props:{
			// 视频地址
			src:{
				type:String,
				default:''
			},
			// 视频标题
			title:{
				type:String,
				default:''
			},
			// 视频封面
			poster:{
				type:String,
				default:''
			},
			// 视频高度
			videoHeight:{
				type: [String, Number],
				default: '230px'
			},
			// 播放图片按钮宽高
			playImgHeight:{
				type: [String, Number],
				default: '70rpx'
			},
			// 暂停按钮
			playImg:{
				type:String,
				default:()=>{
					return require('../../static/play.png')
				}
			},
			// 是否显示静音按钮
			showMuteBtn:{
				type:Boolean,
				default:false
			},
			// 播放完毕是否退出全屏
			isExitFullScreen:{
				type:Boolean,
				default:true
			},
			/**
			 * 主题色
			 */
			primaryColor:{
				type:String,
				default:'#5C91EF'
			},
			/**
			 * 试看提示的文字
			 */
			tipText:{
				type:String,
				default:'试看已结束，本片是会员专享内容'
			},
			/**
			 * 试看按钮的文字
			 */
			btnText:{
				type:String,
				default:'成为会员免费观看'
			},
			// 视频试看时间（秒）
			trialTime:{
				type:Number,
				default:0
			},
		},
		data() {
			return {
				videoCtx:'', //视频上下文
				isPlay:false,// 视频是否播放过
				isShowRateBox:false,// 是否显示倍速盒子
				rateText:'1.0',// 当前倍速
				rateList: [{
					name:'0.5',
					isTo:false
				},{
					name:'0.8',
					isTo:false
				},{
					name:'1.0',
					isTo:true
				},{
					name:'1.25',
					isTo:false
				},{
					name:'1.5',
					isTo:false
				}
				// #ifdef MP-WEIXIN
				,{
					name:'2.0',
					isTo:false
				}
				// #endif
				], //倍数
				isFullScreen: false, //全屏状态
				// 屏幕信息
				screenInfo:{
					width:0,
					height:0,
					options:getPx('160rpx'),// 遮罩要减去的高度
				},
				visibleTrialEndBox:false,// 控制试看结束内容显示隐藏
			}
		},
		computed:{
			// 视频单位高度信息
			elVideoHeight() {
				return {
					intNum:getPx(this.videoHeight ? this.videoHeight : 230),
					strNum:addUnit(this.videoHeight ? this.videoHeight : 230)
				}
			},
			// 播放图片按钮宽高信息
			playBtnHeight(){
				return {
					intNum:getPx(this.playImgHeight ? this.playImgHeight : '70rpx'),
					strNum:addUnit(this.playImgHeight ? this.playImgHeight : '70rpx')
				}
			}
		},
		mounted() {
			this.videoCtx = uni.createVideoContext('sunnyVideo', this)
			this.getScreenInfo()
		},
		methods: {
			// 获取元素信息
			getDomInfo(elId){
				return new Promise(resolve => {
					const view = uni.createSelectorQuery().select(`#${elId}`)
					view.boundingClientRect(data=>{
						resolve(data.height)
					}).exec()
				})
			},
			//监听开始播放
			play(e){
				this.isPlay=true
				this.$emit('play')
			},
			// 监听视频暂停
			pause(){
				this.$emit('pause')
			},
			// 视频播放出错
			playError(e){
				this.$emit('playError',e)
			},
			// 监听视频结束
			ended(){
				this.$emit('videoEnded')
				if(!this.isExitFullScreen)return
				this.videoCtx.exitFullScreen(); //退出全屏
			},
			onBack(){
				uni.navigateBack()
			},
			// 视频播放进度
			timeupdate(e) {
				this.$emit('timeupdate',e)
				// 是否判断需要视频试看
				if(this.trialTime<=0)return
				if(e.detail.currentTime>=this.trialTime){
					this.showTrialEnd()
					console.log('jieshu ');
				}
			},
			// 切换倍速
			changeRate(item,index){
				if(item.isTo)return this.isShowRateBox = false
				this.rateList.forEach((v,i)=>{
					i==index?v.isTo=true:v.isTo=false
				})
				this.videoCtx.playbackRate(item.name*1)
				this.rateText = item.name
				this.isShowRateBox = false
			},
			/**
			 * 播放视频
			 */
			changePlay(){
				this.$nextTick(()=>{
					this.videoCtx.play()
					/* this.rateText ='1.0'
					this.videoCtx.playbackRate(1) */
				})
			},
			// 全屏操作
			fullscreenchange(){
				this.isFullScreen=!this.isFullScreen
				this.$emit('fullscreenchange',this.isFullScreen)
			},
			// 获取屏幕信息
			getScreenInfo(){
				const res = sys()
				this.screenInfo.width = res.screenWidth
				this.screenInfo.height = res.screenHeight
			},
			/**
			 * 控制试看模块显示
			 */
			showTrialEnd(){
				this.visibleTrialEndBox = true
				this.videoCtx.pause()
			},
			/**
			 * 控制试看模块隐藏
			 */
			closeTrialEnd(){
				this.visibleTrialEndBox = false
				this.changePlay()
			},
		}
	}
	
</script>

<style lang="scss">
	.sunny-video{
		position: relative;
		z-index: 0;
		.speedText{
			position: absolute;
			top: 240rpx;
			right: 30rpx;
			z-index: 5;
			padding: 10rpx;
			padding-right: 0;
			font-size: 30rpx;
			color: var(--primary);
			/* #ifndef APP-NVUE */
			box-sizing: border-box;
			/* #endif */
			.text{
				font-size: 30rpx;
				color: var(--primary);
			}
		}
	}
	.video {
		width: 750rpx;
		height: 230px;
	}
	.video-view{
		position: absolute;
		z-index:999;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 750rpx;
		/* #ifndef APP-NVUE */
		padding: var(--status-bar-height) 32rpx 0;
		/* #endif */

		.img{
			width: 56rpx;
			height: 56rpx;
		}
	}
	.banner-view{
		position: relative;
		width: 750rpx;
		height: 230px;
		.banner{
			width: 750rpx;
			height: 230px;
		}
		.imgPal{
			position: absolute;
			z-index: 2;
			top: 240rpx;
			left: 375rpx;
			transform: translate(-35rpx,-35rpx);
			width: 70rpx;
			height: 70rpx;
		}
	}
	.vertical{
		position: relative;
		width: 750rpx;
		height: 410rpx;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		&.vertical-full{
			position: relative;
			.speed-box{
				padding: 50rpx 0;
			}
		}
		.options{
			width: 590rpx;
		}
		.speed-text{
			position: absolute;
			top: 240rpx;
			right: 30rpx;
			font-size: 30rpx;
			color: #fff;
		}
		.speed-box{
			position: absolute;
			right: 0;
			top: 0;
			width: 160rpx;
			height: 230px;
			/* #ifndef APP-NVUE */
			display: flex;
			box-sizing: border-box;
			/* #endif */
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			padding: 10px 0;
			background-color: rgba(0, 0, 0, 0.7);
			.speeds{
				/* #ifndef APP-NVUE */
				box-sizing: border-box;
				/* #endif */
				width: 160rpx;
				text-align: center;
				font-size: 28rpx;
				color: #fff;
				padding: 10px 0px;
				&.act{
					color: var(--primary);
				}
			}
		}
	}
	// 试看结束盒子
	.trialEndBox{
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex: 1;
		height: 100%;
		z-index: 10;
		background-color: rgba(0, 0, 0, 0.9);
		.tipText{
			font-size: 28rpx;
			color: #fff;
		}
		.closeBtn{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			width: 350rpx;
			height: 75rpx;
			margin: 32rpx auto 0;
			font-size: 30rpx;
			line-height: 0;
			color: #fff;
			border-radius: 42rpx;
			background-color: var(--primary);
		}
	}
</style>
